<template>
    <top-header></top-header>
    <div class="red_line--b"></div>
    <div class="wrapper">
        <div class="hander">
            <div class="blog-card">
                <h1 class="title">{{ blog.title }}</h1>

                <div class="triangle"></div>
                <span class="abstract">{{ blog.abstract }}</span>
                <p class="category">{{ blog.blog_category_id }}</p>
                <p class="time">
                    {{ blog.blog_create_time }}
                </p>
            </div>
        </div>
        <div class="detail">
            <div>
                <Editor :defaultConfig="editorConfig" v-model="blog.content" />
            </div>
        </div>
        <div class="submit">
            <div @click="Back">Back</div>
            <div @click="Prev">&lt;Prev</div>
            <div @click="Next">Next&gt;</div>
        </div>
    </div>
    <bottom-footer></bottom-footer>
</template>

<script setup>
import TopHeader from "../../components/TopHeader.vue";
import BottomFooter from "../../components/BottomFooter.vue";
import { inject, ref, onMounted, reactive, shallowRef } from "vue";
import { useRouter, useRoute } from "vue-router";
import { chengeStamp } from "../../utils/GetTime.js";

// 富文本展示设置
import "@wangeditor/editor/dist/css/style.css";
import { Editor } from "@wangeditor/editor-for-vue";
const editorConfig = {
    readOnly: true,
}; // 默认内容

const router = useRouter();
const route = useRoute();
const axios = inject("axios");

const blog = reactive({
    title: "",
    abstract: "",
    content: "",
});

const loadBlog = async () => {
    let res = await axios.get("blog/detail?blog_id=" + route.query.blog_id);
    blog.user_id = res.data[0].user_id;
    blog.blog_category_id = res.data[0].blog_category_id;
    blog.blog_create_time = chengeStamp(res.data[0].blog_create_time);
    blog.title = res.data[0].blog_title;
    blog.abstract = res.data[0].blog_abstract;
    blog.content = res.data[0].blog_content;
};

onMounted(() => {
    loadBlog();
    window.scrollTo({
        bottom: 0,
        top: 0,
    });
});

// 跳转
const Back = () => {
    router.push("/home")
}
const Prev = () => {

}
const Next = () => {

}
</script>

<style lang="scss" scoped>
.red_line--b {
    height: 2px;
    background-color: var(--main-color-b);
}

.wrapper {
    margin: 0 auto ;
    width: 75%;
    min-height: calc(100vh);
    .hander {
        box-shadow: 2px 2px 5px rgba(92, 92, 92, 0.4);
        .blog-card {
            box-shadow: 2px 2px 5px rgba(92, 92, 92, 0.4);
            padding: 10px 0 0 10px;
            margin-bottom: 16px;
            background-color: #ffffff;

            .title {
                margin: 0 auto;
            }
            border-left: 2px solid var(--main-color-b);
            .triangle {
                // z-index: -1;
                position: absolute;
                background-color: #db3450;
                height: 20px;
                width: 20px;
                transform: translate(-11px, -30px);
                -webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
                clip-path: polygon(0 100%, 40% 50%, 0 0);
            }
            .abstract {
                display: block;
                margin: 0 auto;
                padding-right: 30%;
                font-weight: 100;
                font-size: 14px;
                text-shadow: 2px 2px 5px rgba(92, 92, 92, 0.5);
                color: rgb(69, 69, 69);
                height: 80px;
            }

            .category {
                margin: 0 auto;
            }

            .time {
                margin: 0;
            }
        }
    }
    .detail {
        border-left: 2px solid var(--main-color-b);
        box-shadow: 2px 2px 5px rgba(92, 92, 92, 0.4);
        padding: 1em 0 0 1em;
        min-height: 90vh;
    }
    .submit {
        // overflow: hidden;
        margin: 20px 0 10px 0;
        height: 40px;
        display: flex;
        user-select: none;
        // justify-content: space-between;
        // display: inline-block;
        div {
            cursor: pointer;
            text-align: center;
            width: 130px;
            font-weight: 100;
            font-size: 30px;
            white-space: nowrap;
        }
        div:hover {
            color: var(--main-color-a);
        }
    }
}
// .aaaaa {
//     background-color: #db3450;
// }
</style>
